<template>
	<view>
		<u-navbarsearch height="80px">
			<template #center>
				<view style="width: 520rpx">
					<u-search shape="square" placeholder="搜索站点" height="80rpx" v-model="value"
						:showAction="false"></u-search>
					<!-- <u--input border="none" style="background: #f3f4f8;width: 520rpx;height: 80rpx;padding:0 20rpx;"
						placeholder="搜索城市" v-model="value"></u--input> -->
				</view>c
			</template>
		</u-navbarsearch>
		<u-index-list :index-list="showindexList">
			<template v-for="(item, index) in showitemArr">
				<u-index-item>
					<u-index-anchor :text="showindexList[index]"></u-index-anchor>
					<view class="list-cell" :class="{ noafter: index == item.length - 1 }" v-for="(cell, index) in item"
						@click="setcity(cell)">
						{{ cell.label }}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	import cityjsonGroup from "./cityjs.js";

	export default {
		data() {
			return {
				value: "",
				indexList: [],
				itemArr: cityjsonGroup,
			};
		},

		computed: {
			showitemArr() {
				return this.itemArr
					.filter((e) => {
						return e.some((item) => {
							return item.label.includes(this.value);
						});
					})
					.map((e) => {
						return e.filter((item) => {
							return item.label.includes(this.value);
						});
					});
			},
			showindexList() {
				// 把cityjsonGroup转换成indexList
				let indexList = [];
				this.showitemArr.forEach((e) => {
					indexList.push(e[0].pinyin[0]);
				});
				// indexList转换为大写
				indexList = indexList.map((e) => {
					return e.toUpperCase();
				});
				return indexList;
			},
		},
		methods: {
			setcity(item) {
				this.$store.commit("config/setCity", item);

				try {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; // 上一个页面
					// #ifdef APP
					prevPage.$vm.wzinit()
					// #endif
					// #ifndef APP
					prevPage.wzinit()
					// #endif
				} catch {

				}
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss">
	.list-cell {
		height: 90rpx;
		display: flex;
		align-items: center;
		padding-left: 38rpx;
		position: relative;

		&::after {
			content: "";
			background-color: $u-border-color;
			height: 2rpx;
			transform: scaleY(50%);
			position: absolute;
			left: 34rpx;
			right: 0;
			bottom: 0;
		}

		&.noafter {
			&::after {
				display: none;
			}
		}
	}
</style>